<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --offset: 100px;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            height: 100%;
            background-color: #eff3fc;
            width: 160px;
            overflow: hidden;
            font-size: 14px;
        }

        .container::before,
        .container::after {
            content: " ";
            display: block;
            height: 100%;
            position: absolute;
            background-color: #fff;
            width: 120px;
            transition: .2s ease-out;
        }

        .container::before {
            top: -100%;
            box-shadow: 0px 10px 10px rgba(193, 212, 255, 51%);
            transform: translateY(calc(var(--offset) - 100px));
            border-bottom-right-radius: 20px;
        }

        .container::after {
            top: 0px;
            transform: translateY(var(--offset));
            box-shadow: 0px -10px 10px rgba(193, 212, 255, 51%);
            border-top-right-radius: 20px;
        }

        ul {
            position: relative;
            z-index: 1;
            width: 120px;

        }

        ul>li {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            flex-direction: column;
            font-weight: bolder;
            -webkit-font-smoothing: antialiased;
            background-repeat: no-repeat;
            transition: 0.2s;
            will-change: transform;
            position: relative;
        }

        li::before {
            display: block;
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 10px;
            opacity: 0;
            background-color: rgb(193 212 255);
        }

        .active::before {
            transition-delay: 1s;
            transition: 0.2s;
        }

        .active,
        li:hover {
            color: #3b77dc;
        }

        .active+li {
            border-top-right-radius: 20px;
        }

        li:hover:not(.active) {
            background-color: aliceblue;
        }

        .active-before {
            border-bottom-right-radius: 20px;
        }

        .active {
            transform: scale(.98);
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li data-index="1" class="active">
                <svg t="1636446798814" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3175" width="30" height="30">
                    <path d="M0 0h1024v1024H0z" fill="transparent" p-id="3176"></path>
                    <path
                        d="M192 531.2a153.6 153.6 0 0 1 61.44-122.88l230.4-172.8a153.6 153.6 0 0 1 184.32 0l230.4 172.8a153.6 153.6 0 0 1 61.44 122.88V780.8c0 84.8256-68.7744 153.6-153.6 153.6H345.6c-84.8256 0-153.6-68.7744-153.6-153.6V531.2z"
                        fill="#F0F9FE" p-id="3177"></path>
                    <path
                        d="M998.4 467.2V742.4c0 127.2448-103.1552 230.4-230.4 230.4H256c-127.2448 0-230.4-103.1552-230.4-230.4V467.2a230.4 230.4 0 0 1 92.16-184.32l256-192a230.4 230.4 0 0 1 276.48 0l256 192A230.4 230.4 0 0 1 998.4 467.2zM148.48 323.84A179.2 179.2 0 0 0 76.8 467.2V742.4c0 98.9696 80.2304 179.2 179.2 179.2h512c98.9696 0 179.2-80.2304 179.2-179.2V467.2a179.2 179.2 0 0 0-71.68-143.36l-256-192a179.2 179.2 0 0 0-215.04 0l-256 192z"
                        fill="currentColor" p-id="3178"></path>
                    <path
                        d="M320 665.6c0-106.0352 85.9648-192 192-192 106.0352 0 192 85.9648 192 192v153.6a51.2 51.2 0 0 1-102.4 0V665.6a89.6 89.6 0 1 0-179.2 0v153.6a51.2 51.2 0 0 1-102.4 0V665.6z"
                        fill="#4FB5F5" p-id="3179"></path>
                </svg>
                <div>学校风采</div>
            </li>
            <li data-index="2">
                <svg t="1636447104922" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3323" width="30" height="30">
                    <path d="M0 0h1024v1024H0z" fill="transparent" p-id="3324"></path>
                    <path
                        d="M512 76.8C271.6416 76.8 76.8 271.6416 76.8 512s194.8416 435.2 435.2 435.2 435.2-194.8416 435.2-435.2S752.3584 76.8 512 76.8zM25.6 512C25.6 243.3664 243.3664 25.6 512 25.6s486.4 217.7664 486.4 486.4-217.7664 486.4-486.4 486.4S25.6 780.6336 25.6 512z"
                        fill="currentColor" p-id="3325"></path>
                    <path d="M544 544m-390.4 0a390.4 390.4 0 1 0 780.8 0 390.4 390.4 0 1 0-780.8 0Z" fill="#F0F9FE"
                        p-id="3326"></path>
                    <path
                        d="M332.8 358.4a51.2 51.2 0 0 1 51.2 51.2v128a51.2 51.2 0 0 1-102.4 0V409.6a51.2 51.2 0 0 1 51.2-51.2zM753.2544 383.5648a44.8 44.8 0 0 1-10.4192 62.4896L704.2816 473.6l38.5536 27.5456a44.8 44.8 0 1 1-52.0704 72.9088l-89.6-64a44.8 44.8 0 0 1 0-72.9088l89.6-64a44.8 44.8 0 0 1 62.4896 10.4192z"
                        fill="#4FB5F5" p-id="3327"></path>
                </svg>
                <div>人员管理</div>
            </li>
            <li data-index="3">
                <svg t="1636447292570" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3471" width="30" height="30">
                    <path d="M0 0h1024v1024H0z" fill="transparent" p-id="3472"></path>
                    <path
                        d="M972.8 256m0 179.2l0 217.6q0 179.2-179.2 179.2l-384 0q-179.2 0-179.2-179.2l0-217.6q0-179.2 179.2-179.2l384 0q179.2 0 179.2 179.2Z"
                        fill="#F0F9FE" p-id="3473"></path>
                    <path
                        d="M780.8 89.6c113.1136 0 204.8 91.6864 204.8 204.8v332.8c0 113.1136-91.6864 204.8-204.8 204.8H243.2c-113.1136 0-204.8-91.6864-204.8-204.8V294.4c0-113.1136 91.6864-204.8 204.8-204.8h537.6z m153.6 204.8c0-84.8256-68.7744-153.6-153.6-153.6H243.2c-84.8256 0-153.6 68.7744-153.6 153.6v332.8c0 84.8256 68.7744 153.6 153.6 153.6h537.6c84.8256 0 153.6-68.7744 153.6-153.6V294.4z"
                        fill="currentColor" p-id="3474"></path>
                    <path
                        d="M802.2912 269.184a51.2 51.2 0 0 1 3.7376 72.3072L613.76 554.688a51.2 51.2 0 0 1-63.936 9.8688l-114.1248-66.944L281.728 673.7024a51.2 51.2 0 0 1-77.0816-67.4048l181.8624-208a51.2 51.2 0 0 1 64.448-10.4576l114.688 67.2896L729.984 272.896a51.2 51.2 0 0 1 72.32-3.7376z"
                        fill="#4FB5F5" p-id="3475"></path>
                    <path
                        d="M76.8 908.8a25.6 25.6 0 0 1 25.6-25.6h819.2a25.6 25.6 0 1 1 0 51.2H102.4a25.6 25.6 0 0 1-25.6-25.6z"
                        fill="currentColor" p-id="3476"></path>
                </svg>
                <div>教务管理</div>
            </li>
            <li data-index="4">
                <svg t="1636447391742" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3622" width="30" height="30">
                    <path d="M0 0h1023.99488v1023.99488H0z" fill="transparent" p-id="3623"></path>
                    <path
                        d="M622.332888 310.756846c131.634542-14.975925 247.000365 7.769561 303.102485 258.225909 54.886126 245.029175 0 354.468628-98.175509 374.129329-74.726026 14.963125-177.240714-7.654362-204.926976-127.077764C584.189079 651.580742 476.119219 643.798381 436.388218 594.941025c-118.489008-145.701671 54.297329-269.233854 185.93187-284.196979z"
                        fill="#F0F9FE" p-id="3624"></path>
                    <path
                        d="M776.661717 261.016295c69.92605 46.706966 122.994585 134.847326 156.901615 285.464173 32.959835 146.431268 33.97103 256.216319 9.279954 333.84793-25.305473 79.526002-77.657212 124.799376-145.688872 138.354509-48.434958 9.651152-106.905065 7.475163-158.616807-17.574313-52.735736-25.548672-96.255519-73.91963-114.380228-151.679241-21.183894-90.879546-61.030095-136.741716-100.300298-167.154364-16.755116-12.979135-33.356633-23.142284-49.919751-33.279834-3.635182-2.227189-7.270364-4.441578-10.892745-6.694367-19.212704-11.90394-39.513402-25.254274-54.310129-43.353383-38.297409-46.847766-54.796526-94.233129-52.530937-139.9033 2.252789-45.362973 22.822286-85.567572 52.185339-118.783406 58.07331-65.663672 154.572027-108.889056 237.822811-118.309809 79.551602-8.998355 160.575197-7.615962 230.450048 39.065405z m-28.441458 42.572587c-54.220529-36.223819-119.679402-39.423803-196.261419-30.758246-72.882836 8.243159-156.914415 46.719766-205.208574 101.349893-23.807881 26.931065-37.887811 56.511717-39.411003 87.385163-1.510392 30.566247 9.075155 65.881271 41.036595 104.985075 8.755156 10.713546 22.143889 20.147099 41.650992 32.230239 3.161584 1.97119 6.476768 3.99358 9.91995 6.10557 16.639917 10.163149 36.07022 22.04149 55.257324 36.902215 47.91016 37.107014 94.770726 92.863536 118.809006 196.01822 14.719926 63.167684 48.422158 98.610707 86.847566 117.221814 39.436603 19.110304 86.07957 21.452693 126.284168 13.439933 48.409358-9.651152 86.821966-40.537397 106.905066-103.666682 20.684697-65.023675 21.695892-164.376778-10.431948-307.070465-32.639837-144.933675-81.241194-217.98291-135.397723-254.142729zM140.799296 179.199104a89.599552 89.599552 0 1 0 0 179.199104 89.599552 89.599552 0 0 0 0-179.199104zM0 268.798656c0-77.759611 63.039685-140.799296 140.799296-140.799296s140.799296 63.039685 140.799296 140.799296-63.039685 140.799296-140.799296 140.799296S0 346.558267 0 268.798656z"
                        fill="currentColor" p-id="3625"></path>
                    <path
                        d="M428.797856 63.99968a57.599712 57.599712 0 1 0 0 115.199424 57.599712 57.599712 0 0 0 0-115.199424zM319.9984 121.599392a108.799456 108.799456 0 1 1 217.598912 0 108.799456 108.799456 0 0 1-217.598912 0zM703.99648 57.599712a51.199744 51.199744 0 1 0 0 102.399488 51.199744 51.199744 0 0 0 0-102.399488z m-102.399488 51.199744a102.399488 102.399488 0 1 1 204.798976 0 102.399488 102.399488 0 0 1-204.798976 0z"
                        fill="currentColor" p-id="3626"></path>
                    <path
                        d="M723.669982 471.652042a51.199744 51.199744 0 0 1 71.87164 8.831956c21.708691 27.775861 38.374208 66.431668 49.535753 102.309888 11.276744 36.223819 18.918305 75.96762 18.918305 108.402658a51.199744 51.199744 0 0 1-102.399488 0c0-18.764706-4.902375-47.807761-14.284729-77.97721-9.510352-30.527847-21.644692-55.858921-32.460637-69.695652a51.199744 51.199744 0 0 1 8.831956-71.87164z"
                        fill="#4FB5F5" p-id="3627"></path>
                </svg>
                <div>通知管理</div>
            </li>
            <li data-index="5">
                <svg t="1636447442371" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3773" width="30" height="30">
                    <path d="M0 0h1024v1024H0z" fill="transparent" p-id="3774"></path>
                    <path
                        d="M512 203.3536a128 128 0 0 1 128 0l226.7264 130.8928a128 128 0 0 1 64 110.848v261.7984a128 128 0 0 1-64 110.848L640 948.6592a128 128 0 0 1-128 0L285.2736 817.7536a128 128 0 0 1-64-110.848V445.0944a128 128 0 0 1 64-110.848L512 203.3408z"
                        fill="#F0F9FE" p-id="3775"></path>
                    <path
                        d="M409.6 55.168a204.8 204.8 0 0 1 204.8 0l242.0352 139.7248a204.8 204.8 0 0 1 102.4 177.3696v279.4752a204.8 204.8 0 0 1-102.4 177.3568L614.4 968.8448a204.8 204.8 0 0 1-204.8 0L167.5648 829.0944a204.8 204.8 0 0 1-102.4-177.3568V372.2624a204.8 204.8 0 0 1 102.4-177.3568L409.6 55.1552z m179.2 44.3392a153.6 153.6 0 0 0-153.6 0L193.1648 239.232a153.6 153.6 0 0 0-76.8 133.0176v279.4752a153.6 153.6 0 0 0 76.8 133.0176L435.2 924.5056a153.6 153.6 0 0 0 153.6 0l242.0352-139.7504a153.6 153.6 0 0 0 76.8-133.0176V372.2624a153.6 153.6 0 0 0-76.8-133.0176L588.8 99.5072z"
                        fill="currentColor" p-id="3776"></path>
                    <path
                        d="M512 409.6a102.4 102.4 0 1 0 0 204.8 102.4 102.4 0 0 0 0-204.8z m-204.8 102.4c0-113.1136 91.6864-204.8 204.8-204.8s204.8 91.6864 204.8 204.8-91.6864 204.8-204.8 204.8-204.8-91.6864-204.8-204.8z"
                        fill="#4FB5F5" p-id="3777"></path>
                </svg>
                <div>系统设置</div>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        const lis = document.querySelectorAll("li");
        let active = document.querySelector('.active');
        let activeBefore = document.querySelector('.active-before');
        lis.forEach(li => {
            li.addEventListener("click", (e) => {
                const index = e.currentTarget.dataset.index;
                document.documentElement.style.setProperty("--offset", (index * 100) + 'px');

                active && active.classList.remove('active');
                activeBefore && activeBefore.classList.remove('active-before');

                active = e.currentTarget;
                activeBefore = e.currentTarget.previousElementSibling;

                active && active.classList.add('active')
                activeBefore && activeBefore.classList.add('active-before');


            }, true);
        })
    </script>
</body>

</html>